<template>
	<view class="photo_gallery">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrefresh="onRefresh" :refresher-threshold="50" class="photo_gallery_view"
			@scrolltolower="scrolltolower">
			<template v-if="params?.type === '1'">
				<image :src="item?.url" @click="handlePreview(item)" v-for="(item,index) in dataSouse" :key="item?.id">
				</image>
			</template>
			<template v-else>
				<video @click="handlePreviewVideo(item)" :src="item?.url" v-for="(item,index) in dataSouse"
					:key="item?.id" :controls="false" :show-center-play-btn="false">
				</video>
			</template>
			<u-loadmore :status="status" @loadmore="scrolltolower" v-if="status !== 'nomore'"></u-loadmore>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, unref, reactive } from "vue";
	import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";
	import { qxActivityMediaList } from "@/config/index.api";

	const dataSouse = ref([]);
	const params = ref();
	const status = ref('loadmore');
	const scrollTop = ref(0);
	// 分页计数
	const pagination = reactive({ pageNo: 1, total: 0, pageSize: 15 });
	const triggered = ref(false);

	onLoad((par) => {
		console.log(par, '13');
		params.value = par;
		console.log(params.value);
		pagination.pageNo = 1;
		loadData();
	});

	async function loadData() {
		if (pagination.pageNo === 1) {
			dataSouse.value = [];
		}
		status.value = 'loading';
		console.log(params.value);
		const res = await qxActivityMediaList({ activityId: unref(params)?.id, type: unref(params)?.type, ...pagination, });
		triggered.value = false;
		pagination.total = res?.total;
		dataSouse.value?.push(...res?.records);
		if (unref(dataSouse)?.length < pagination.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}

	/**
	 * 图片预览
	 */
	function handlePreview(item) {
		console.log(item?.url, dataSouse.value?.map(item => item?.url));
		uni.previewImage({
			urls: dataSouse.value?.map(item => item?.url),
			count: item?.url,
			indicator: 'default',
		})
	}

	/**
	 * 视频预览
	 */
	function handlePreviewVideo(item) {
		uni.$u.route({
			url: 'pages/mine/videoPreview',
			params: {
				url: item?.url
			}
		})
	}

	/**
	 * 滚动到底部操作
	 */
	function scrolltolower(e) {
		console.log(e, 'lower', unref(dataSouse)?.length !== pagination.total, unref(dataSouse)?.length, pagination.total);
		if (unref(dataSouse)?.length < pagination.total) {
			pagination.pageNo++;
			loadData();
		}
	}

	/**
	 * 自定义下拉刷新被触发
	 */
	function onRefresh() {
		console.log(132);
		triggered.value = false;
		pagination.pageNo = 1;
		loadData();
	}

	/**
	 * 分享
	 */
	// onShareAppMessage(async (res) => {
	// 	console.log(res, '123');
	// 	// await qxActivityManageListMini({ activityId: info.value?.id, operationType: '2' });
	// 	return {
	// 		title: info.value?.activityName,
	// 		path: `/pages/index/photoGallery?id=${info.value?.id}`
	// 	}
	// })
</script>

<style lang="scss" scoped>
	.photo_gallery {
		position: relative;


		.photo_gallery_view {
			margin: 20rpx 24rpx 20rpx 16rpx;
			height: calc(100vh - 63px);

			image,
			video {
				width: 30.1%;
				margin-left: 14rpx;
				// width: 170rpx;
				height: 226rpx;
				object-fit: contain;
				margin-bottom: 12rpx;
			}
		}

		::v-deep .u-swiper {
			// background-color: #000000 !important;
		}

		.photo_gallery_right {
			position: absolute;
			width: 60rpx;
			right: 34rpx;
			top: 30vh;
			display: flex;
			flex-direction: column;

			.photo_gallery_right_item {
				margin-bottom: 40rpx;
				color: #ffffff;

				image {
					width: 56rpx;
					height: 56rpx;
				}

				text {
					font-size: 26rpx;
					font-weight: 500;
				}
			}
		}

		.photo_gallery_btm {
			position: absolute;
			bottom: 10rpx;
			color: #ffffff;
		}
	}
</style>